import React, { useState, useEffect } from 'react';
import { Button, Form, Select, Input, Switch } from 'antd';
import ProForm, {
  ProFormText,
  ProFormCheckbox,
  ProFormRadio,
  ProFormSwitch,
  ProFormSelect,
  ProFormFieldSet,
  ProFormList,
} from '@ant-design/pro-form';

const ImportUrlItem = ({
  url,
  type,
}: {
  url?: string;
  type?: 'edit' | 'add';
}) => {
  const [importUrl, setImportUrl] = useState<boolean>(url ? true : false);

  return (
    <ProForm.Group>
      <ProForm.Item label="导入项目">
        <Switch
          checked={importUrl}
          onChange={(val) => setImportUrl(val)}
          disabled={type === 'edit'}
        />
      </ProForm.Item>
      <ProForm.Item>
        {importUrl && (
          <ProFormText
            name="projectGitUrl"
            width="md"
            disabled={type === 'edit'}
            placeholder="请输入项目地址"
            rules={[
              {
                required: true,
                message: '请输入项目地址',
              },
            ]}
          />
        )}
      </ProForm.Item>
    </ProForm.Group>
  );
};

export default ({ type }: { type?: 'add' | 'edit' }) => {
  return (
    <React.Fragment>
      <ProForm.Group>
        <ProFormText hidden name="groupId" />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormText hidden name="projectId" />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormText
          name="projectName"
          label="项目名称"
          disabled={type === 'edit'}
          width="md"
          placeholder="请输入项目名称"
          rules={[
            {
              required: true,
              message: '请输入项目名称',
            },
          ]}
        />
        <ProFormSelect
          name="projectType"
          label="项目类型"
          width="md"
          disabled={type === 'edit'}
          placeholder="请选择项目类型"
          valueEnum={{
            spa: 'spa',
            ssr: 'ssr',
            microService: 'microService',
          }}
        />
      </ProForm.Group>
      <Form.Item noStyle shouldUpdate>
        {(form) => {
          const url: string | undefined = form.getFieldValue('url');
          return <ImportUrlItem url={url} type={type} />;
        }}
      </Form.Item>
      <ProForm.Group>
        <ProFormSwitch name="rewrite" label="覆盖" disabled={type === 'edit'} />
      </ProForm.Group>
    </React.Fragment>
  );
};
